
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:ymApp/public.dart';

class ProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print('个人中心页构建中');
    return Scaffold(
      body: Container(
        child: SafeArea(
          child: Column(
            children: [
              topSectionBuild(context)
            ],
          ),
        ),
      ),
    );
  }

  Widget topSectionBuild(BuildContext context) {
    return Expanded(
      flex: 1,
      child: Container(
        child: Column(
          children: [
            Padding(
              padding: EdgeInsets.all(20.rpx),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Icon(MyIcons.saomiao,size: 40.rpx,),
                  SizedBox(width: 20.rpx,),
                  Icon(MyIcons.yanse,size: 44.rpx,),
                  SizedBox(width: 20.rpx,),
                  Icon(MyIcons.yuelaing,size: 44.rpx,),
                ],
              ),
            ),
            Padding(
              padding: EdgeInsets.all(20.rpx),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      Container(
                        width: 100.rpx,
                        height: 100.rpx,
                        child: CircleAvatar(
                          backgroundImage: NetworkImage('https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3095823371,2737858048&fm=26&gp=0.jpg',scale: 3),
                        ),
                      ),
                      SizedBox(width: 30.rpx,),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Text('五级吉他',style: TextStyle(fontSize: 26.rpx)),
                              SizedBox(width: 4.rpx,),
                              DefaultTextStyle(
                                style: TextStyle(
                                  fontWeight: FontWeight.w800,
                                  color: Colors.white,
                                  background: new Paint()..color=Colors.orange,
                                ),
                                child: Text.rich(TextSpan(
                                    children: [
                                      TextSpan(text: 'l v '),
                                      TextSpan(text: '4',style: TextStyle(fontSize: 20.rpx))
                                    ]
                                )),
                              )
                            ],
                          ),
                          SizedBox(height: 10.rpx,),
                          Container(
                            padding: EdgeInsets.all(2.rpx),
                            decoration: BoxDecoration(
                                border: Border.all(color: Colors.pink,width: 3.rpx),
                                borderRadius: BorderRadius.all(Radius.circular(5.rpx))
                            ),
                            child: Text('正式会员',style: TextStyle(color: Colors.pink,fontWeight:FontWeight.w600),),
                          ),
                          SizedBox(height: 10.rpx,),
                          DefaultTextStyle(
                            style: TextStyle(
                                fontSize: 24.rpx,
                                color: Colors.black45
                            ),
                            child: Row(
                              children: [
                                Text('B币: 0.0'),
                                SizedBox(width: 10.rpx),
                                Text('硬币: 754')
                              ],
                            ),
                          )
                        ],
                      )
                    ],
                  ),
                  Row(
                    children: [
                      Text('空间',style: TextStyle(color: Colors.black45,fontSize: 24.rpx),),
                      Icon(Icons.arrow_forward_ios,color: Colors.black45,size: 36.rpx,)
                    ],
                  )
                ],
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Column(
                  children: [
                    Text('0',style: TextStyle(fontSize: 26.rpx,fontWeight: FontWeight.w600),),
                    SizedBox(height: 8.rpx,),
                    Text('动态',style: TextStyle(fontSize: 26.rpx,color: Colors.black45))
                  ],
                ),
                Container(
                  width: 2.rpx,
                  height: 40.rpx,
                  color: Colors.black45,
                ),
                Column(
                  children: [
                    Consumer<UserProvider>(
                      builder: (ctx,counterPro,child) {
                        return Text('${counterPro.count}',style: TextStyle(fontSize: 26.rpx,fontWeight: FontWeight.w600),);
                      },
                    ),
                    SizedBox(height: 8.rpx,),
                    Text('关注',style: TextStyle(fontSize: 26.rpx,color: Colors.black45),)
                  ],
                ),
                Container(
                  width: 2.rpx,
                  height: 40.rpx,
                  color: Colors.black45,
                ),
                Column(
                  children: [
                    Text('0',style: TextStyle(fontSize: 26.rpx,fontWeight: FontWeight.w600),),
                    SizedBox(height: 8.rpx,),
                    Text('粉丝',style: TextStyle(fontSize: 26.rpx,color: Colors.black45))
                  ],
                )
              ],
            ),
            Container(
              child: Stack(
                children: [
                  Container(
                    margin: EdgeInsets.only(top: 80.rpx),
                    height: 60.rpx,
                    decoration: BoxDecoration(
                        gradient: LinearGradient(
                            begin: Alignment.bottomCenter,
                            end: Alignment.topCenter,
                            colors: [Colors.pinkAccent,Colors.white]
                        )
                    ),
                  ),
                  Positioned(
                    bottom: -2.rpx,
                    left: 15.rpx,
                    right: 15.rpx,
                    child: Container(
                      padding: EdgeInsets.all(15.rpx),
                      margin: EdgeInsets.symmetric(horizontal: 30.rpx),
                      decoration: BoxDecoration(
                          color: Color(0xffF9B6C1),
                          borderRadius: BorderRadius.only(topLeft: Radius.circular(10.rpx),topRight: Radius.circular(10.rpx)),
                          border: Border.all(color: Colors.pinkAccent,width: 2.rpx)
                      ),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Column(
                            children: [
                              Text('我的大会员',
                                style: TextStyle(color: Colors.pinkAccent,fontWeight: FontWeight.bold,fontSize: 26.rpx),
                              ),
                              Text('了解更多权益',style:  TextStyle(color: Colors.pinkAccent,fontWeight: FontWeight.bold,fontSize: 20.rpx,))
                            ],
                          ),
                          Icon(Icons.arrow_forward_ios)
                        ],
                      ),
                    ),
                  )
                ],
              ),
            ),
            Expanded(
              flex: 1,
              child: Container(
                padding: EdgeInsets.all(15.rpx),
                child: ListView(
                  children: [
                    Container(
                      child: Column(
                        children: [
                          Padding(
                            padding: EdgeInsets.symmetric(vertical: 15.rpx),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: [
                                iconItemBuilder(context,title: '离线缓存',icon: MyIcons.huancun, iconColor: Colors.blue),
                                iconItemBuilder(context,title: '历史记录',icon: MyIcons.jilu, iconColor: Colors.blue),
                                iconItemBuilder(context,title: '我的收藏',icon: MyIcons.shoucang, iconColor: Colors.blue),
                                iconItemBuilder(context,title: '稍后再看',icon: MyIcons.shaohou, iconColor: Colors.blue),
                              ],
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text('创作中心',style: TextStyle(fontSize: 24.rpx,fontWeight: FontWeight.bold),),
                                Container(
                                  padding: EdgeInsets.symmetric(horizontal: 20.rpx,vertical: 10.rpx),
                                  decoration: BoxDecoration(
                                    color: Colors.pinkAccent,
                                    borderRadius: BorderRadius.all(Radius.circular(100))
                                  ),
                                  child: Row(
                                    children: [
                                      Icon(Icons.file_upload,color: Colors.white,),
                                      Text('发布',style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold ),)
                                    ],
                                  ),
                                )
                              ],
                            ),
                          ),
                          Padding(
                            padding: EdgeInsets.symmetric(vertical: 15.rpx),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: [
                                iconItemBuilder(context,title: '创作首页',icon: MyIcons.shouye, iconColor: Colors.amber),
                                iconItemBuilder(context,title: '创作学院',icon: MyIcons.xueyuan, iconColor: Colors.amber),
                                iconItemBuilder(context,title: '创作日历',icon: MyIcons.rili, iconColor: Colors.amber),
                                iconItemBuilder(context,title: '热门活动',icon: MyIcons.huodong, iconColor: Colors.amber),
                              ],
                            ),
                          ),
                        ],
                      ),
                    )
                  ],
                ),
              ),
            )
          ],
        ),
      )
    );
  }

  Widget iconItemBuilder(BuildContext context,{String title, IconData icon, Color iconColor , Color titleColor, String path}) {
    return GestureDetector(
      onTap: (){
        if(path != null) {
          Routes.navigateTo(context, path);
        }
      },
      child: Container(
        child: Column(
          children: [
            Icon(icon,color: iconColor,size: 48.rpx,),
            Text('$title')
          ],
        ),
      ),
    );
  }
}

